<!DOCTYPE html>
<!-- saved from url=(0052)http://getbootstrap.com/docs/4.0/examples/dashboard/ -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<meta name="description" content="">
		<meta name="author" content="">

		<title>成员列表</title>
		<!-- Bootstrap core CSS -->
		<link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">

		<!-- Custom styles for this template -->
		<link th:href="@{/css/dashboard.css}" rel="stylesheet">
	</head>

	<body>
	<div th:replace="~{commons/commons::topbar}"></div>

		<div class="container-fluid">
			<div class="row">
				<div th:insert="~{commons/commons::sidebar(active='emplist')}"></div>

				<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
					<h2>
						<button class="btn btn-sm btn-success btn-lg" data-toggle="modal" data-target="#add">添加用户</button>
					</h2>
					<!-- 模态框（Modal） -->
					<div class="table-responsive">
						<table class="table table-striped table-sm">
							<thead>
								<tr>
									<th>编号</th>
									<th>名字</th>
									<th>权限</th>
									<th>操作</th>
								</tr>
							</thead>
							<tbody>
								<tr th:each="emp:${emps}">
									<td th:text="${emp.getUid()}"></td>
									<td th:text="${emp.getUserName()}"></td>
									<td th:text="${emp.getAuthority()}"></td>
									<td>
										<a class="btn btn-sm btn-primary disabled" data-toggle="modal" data-target="#edit">编辑</a>
										<a class="btn btn-sm btn-danger" th:href="@{'/emps/del?username='+${emp.getUserName()}}">删除</a>

									</td>

								</tr>
							</tbody>
						</table>
					</div>
				</main>
			</div>
		</div>

		<!-- Bootstrap core JavaScript
    ================================================== -->
		<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
		<script type="text/javascript" th:src="@{/js/popper.min.js}"></script>
		<script type="text/javascript" th:src="@{/js/bootstrap.min.js}"></script>



		<div class="modal fade" id="add" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog modal-lg">
			<div class="modal-content">
				<div class="modal-header">
					<h4 class="modal-title" id="myModalLabel">添加用户</h4>
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
				</div>
				<div class="modal-body">
					<form class="form-inline" role="form" th:action="@{/emps/add}" method="post">
						<div class="form-group">
							<label class="sr-only" for="name">用户名</label>
							<input type="text" name="username" class="form-control" id="name" placeholder="用户名">
							<label class="sr-only" for="password">密码</label>
							<input type="password" name="password" class="form-control" id="password" placeholder="请输入密码">
							<select class="form-control" name="group">
								<option th:each="group:${group}" th:value="${group.getAuthority()}" th:text="${group.getAuthority()}"></option>
							</select>
							<button type="submit" class="btn btn-default">提交</button>
						</div>
					</form>
				</div>
			</div><!-- /.modal-content -->
		</div><!-- /.modal -->
			<div class="modal fade" id="edit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
				<div class="modal-dialog modal-lg">
					<div class="modal-content">
						<div class="modal-header">
							<h4 class="modal-title" id="myModalLabel">修改</h4>
							<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
						</div>
						<div class="modal-body">
							<form class="form-inline" role="form" th:action="@{/emps/edit}" method="post">
								<div class="form-group">
									<label class="sr-only" for="password">密码</label>
									<input type="password" name="password" class="form-control" id="password" placeholder="请输入密码">
									<select class="form-control" name="group">
										<option th:each="group:${group}" th:value="${group.getAuthority()}" th:text="${group.getAuthority()}"></option>
									</select>
									<button type="submit" class="btn btn-default">提交</button>
								</div>
							</form>
						</div>
					</div><!-- /.modal-content -->
				</div><!-- /.modal -->
	</div>

	</body>

</html>